<script setup lang="ts">
import {
  getkDataRequest,
  productTongjiRequest,
  userTongjiRequest,
  getsimpleDataRequest,
} from '@/api/statistic'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const userNum = ref(0)
const userDataLoading = ref(false)
const productNum = ref(0)
const productDataLoading = ref(false)

const timer1 = setInterval(function () {
  // userDataLoading.value = true

  setTimeout(() => {
    userTongjiRequest().then((r) => {
      // userDataLoading.value = false
      // console.log(r.data)
      userNum.value = r.data.data
    })
  }, 1000)
}, 2000)

//页面被卸载-清除定时器
onBeforeUnmount(function () {
  clearInterval(timer1)
})

productDataLoading.value = true

setTimeout(() => {
  productTongjiRequest().then((r) => {
    productDataLoading.value = false
    // console.log(r.data)
    productNum.value = r.data.data
  })
}, 1000)

onMounted(async function () {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('main'))
  const r = await getsimpleDataRequest()
  // console.log(r.data.data[0].x)
  // r.data // 绘制图表
  const xArr = r.data.data.map((v) => v.x)
  const valArr = r.data.data.map((v) => v.val)
  console.log(xArr)
  console.log(valArr)

  const option = {
    xAxis: {
      type: 'category',
      data: xArr,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: valArr,
        type: 'line',
      },
    ],
  }
  myChart.setOption(option)
})

onMounted(async function () {
  const r = await getkDataRequest()
  console.log(r.data)

  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('main2'))
  // 调用接口--获取图标数据--调用setOpton
  // 绘制图表
  const option = {
    xAxis: {
      data: r.data.data.x,
    },
    yAxis: {},
    series: [
      {
        type: 'candlestick',
        data: r.data.data.val,
      },
    ],
  }
  myChart.setOption(option)
})
</script>

<template>
  <div>
    <el-button type="primary" :loading="userDataLoading">用户的实时数量：{{ userNum }}</el-button>
    <el-button type="primary" :loading="productDataLoading"
      >商品的实时数量：{{ productNum }}</el-button
    >
  </div>

  <el-row>
    <el-col :span="24">
      <div id="main"></div>
    </el-col>
    <el-col :span="24">
      <div id="main2"></div>
    </el-col>
  </el-row>
</template>

<style scoped>
#main {
  margin-top: 50px;
  width: 100%;
  height: 400px;
}
#main2 {
  margin-top: 50px;

  width: 100%;
  height: 600px;
}
</style>
